<template>
      <div id="designer">
        <process-designer
                :key="`designer-${reloadIndex}`"
                ref="processDesigner"
                v-bind="controlForm"
                keyboard
                @element-click="elementClick"
                @init-finished="initModeler"
                @save="onSave"
        />
        <process-panel
                :key="`penal-${reloadIndex}`"
                :bpmn-modeler="modeler"
                :prefix="controlForm.prefix"
                class="process-panel"
        />

        <!-- demo config -->
        <div class="demo-control-bar">
          <div
                  class="open-control-dialog"
                  @click="controlDrawerVisible = true"
          >
            <a-icon type="setting" />
          </div>
        </div>
        <a-drawer
                :visible="controlDrawerVisible"
                width="400px"
                title="偏好设置"
                @close="controlDrawerVisible = false"
        >
          <a-form-model
                  :model="controlForm"
                  :label-col="{ span: 6 }"
                  :wrapper-col="{ span: 18 }"
                  class="control-form"
          >
            <a-form-model-item label="流程ID">
              <a-input
                      v-model="controlForm.processId"
                      disabled
                      @change="reloadProcessDesigner"
              />
            </a-form-model-item>
            <a-form-model-item label="流程名称">
              <a-input
                      v-model="controlForm.processName"
                      @change="reloadProcessDesigner"
              />
            </a-form-model-item>
            <a-form-model-item label="流转模拟">
              <a-switch
                      v-model="controlForm.simulation"
                      un-checked-children="停用"
                      checked-children="启用"
                      @change="reloadProcessDesigner"
              />
            </a-form-model-item>
            <a-form-model-item label="禁用双击">
              <a-switch
                      v-model="controlForm.labelEditing"
                      un-checked-children="停用"
                      checked-children="启用"
                      @change="changeLabelEditingStatus"
              />
            </a-form-model-item>
            <a-form-model-item label="隐藏label">
              <a-switch
                      v-model="controlForm.labelVisible"
                      un-checked-children="停用"
                      checked-children="启用"
                      @change="changeLabelVisibleStatus"
              />
            </a-form-model-item>
            <a-form-model-item label="流程引擎">
              <a-radio-group
                      v-model="controlForm.prefix"
                      @change="reloadProcessDesigner"
              >
                <a-radio value="camunda">
                  camunda
                </a-radio>
                <a-radio value="flowable">
                  flowable
                </a-radio>
                <a-radio value="activiti">
                  activiti
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="工具栏">
              <a-radio-group v-model="controlForm.headerButtonSize">
                <a-radio value="small">
                  small
                </a-radio>
                <a-radio value="default">
                  default
                </a-radio>
                <a-radio value="large">
                  large
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-form-model>
          <br>
        </a-drawer>
      </div>
</template>

<script>
// 自定义渲染（隐藏了 label 标签）
import CustomRenderer from '@/plugins/custom-renderer'
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from './ProcessDesigner/plugins/content-pad'
// 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from './ProcessDesigner/plugins/palette'
// 自定义侧边栏
// import ProcessPanel from "../ProcessPanel/ProcessPanel";

export default {
  name: 'BpmnDesigner',
  components: {},
  props: {
    value: {
      type: Object,
      default: function(e) {
        return {}
      }
    }
  },

  data() {
    return {
      modeler: null,
      reloadIndex: 0,
      controlDrawerVisible: false,
      controlForm: {
        value: '',
        processId: '',
        processName: '',
        simulation: true,
        labelEditing: false,
        labelVisible: false,
        prefix: 'activiti',
        headerButtonSize: 'default',
        additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
      },
      addis: {}
    }
  },
  created() {},
  watch: {
    value: {
      deep: true,
      handler(nv) {
        this.controlForm.processId = nv.processId
        this.controlForm.processName = nv.processName
        this.controlForm.value = nv.xml
        this.reloadProcessDesigner()
      }
    }
  },
  methods: {
    initModeler(modeler) {
      setTimeout(() => {
        this.modeler = modeler
      }, 10)
    },
    reloadProcessDesigner() {
      this.controlForm.additionalModel = []
      for (const key in this.addis) {
        if (this.addis[key]) {
          this.controlForm.additionalModel.push(this.addis[key])
        }
      }
      this.reloadIndex += 1
      this.modeler = null // 避免 panel 异常
    },
    changeLabelEditingStatus(status) {
      this.addis.labelEditing = status
        ? { labelEditingProvider: ['value', ''] }
        : false
      this.reloadProcessDesigner()
    },
    changeLabelVisibleStatus(status) {
      this.addis.customRenderer = status ? CustomRenderer : false
      this.reloadProcessDesigner()
    },
    elementClick(element) {
      this.element = element
    },
    onSave(args) {
      this.$emit('save', args)
    }
  }
}
</script>

<style lang="scss">
.ant-spin-nested-loading,.ant-spin-container{
  height: 100%;

}
.ant-spin-nested-loading > div > .ant-spin{
  max-height:100%;
}
.spin-content {
    background-color: #ffff;
    width: 100%;
    height: 100%;
  }
#designer {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: inline-grid;
  grid-template-columns: auto max-content;
}
.demo-control-bar {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  .open-control-dialog {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 32px;
    background: rgba(64, 158, 255, 1);
    color: #ffffff;
    cursor: pointer;
  }
}
.control-form {
  .a-radio {
    width: 100%;
    line-height: 32px;
  }
}
</style>
